<!--  -->
<template>
  <div style="padding: 15px 15px">
    <el-form label-width="180px" size="small" label-position="right">
      <el-row>
        <el-col :span="8">
          <el-form-item label="选择省份">
            <el-select v-model="formData.provinceCode" filterable @change="provinceChange" placeholder="请选择">
              <el-option v-for="item in aList" :key="item.provinceCode" :label="item.provinceName" :value="item.provinceCode" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="选择市区">
            <el-select v-model="formData.cityCode" filterable placeholder="请选择">
              <el-option v-for="item in bList" :key="item.cityCode" :label="item.cityName" :value="item.cityCode" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目名称">
            <el-input v-model="formData.nameLike" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <div style="text-align: right"><el-button type="primary" size="mini" @click="projectList">查询</el-button></div>
        </el-col>
      </el-row>
    </el-form>
    <el-collapse accordion v-model="activeName">
      <el-collapse-item :name="item.packageKey" v-for="item in packageList" :key="item.packageKey">
        <template slot="title">
          <div class="font-size-16 font-weight-700 padding-left-10">{{ item.packageName }}</div>
        </template>
        <el-table :data="item.projectList" style="width: 100%" border>
          <el-table-column label="项目名称" prop="name" class-name="bg-color-82DEB5" header-align="left" align="left"> </el-table-column>

          <el-table-column label="项目地址" class-name="bg-color-82DEB5" header-align="left" align="left" prop="address"> </el-table-column>

          <el-table-column label="操作" width="100" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button @click="handleView(scope.row)" type="text" size="small">点击查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
  import { getMenuList } from '@/api';
  import Api from '../../api/assetsMap';
  export default {
    components: {},
    data() {
      return {
        formData: {
          provinceCode: null,
          cityCode: null,
          nameLike: null,
        },
        aList: [],
        bList: [],
        activeName: '1',
        packageList: [],
      };
    },
    mounted() {
      this.projectList();
      this.provinceList();
    },
    //方法集合
    methods: {
      // 项目
      async projectList() {
        const { rows } = await Api.projectList(this.formData);
        this.packageList = rows;
      },
      // 省
      async provinceList() {
        const { rows } = await Api.provinceList({});
        this.aList = rows;
      },
      //市
      async provinceChange(val) {
        if (val == '') return;
        const { rows } = await Api.cityList({
          provinceCode: val,
        });
        this.bList = rows;
      },
      async handleView(data) {
        let res = await getMenuList({
          parentId: this.$route.query.tabId,
        });

        let menuUrl = res.rows[0].menuUrl;
        let separator = menuUrl.indexOf('?') > -1 ? '&' : '?';
        let queryData = {
          isRefresh: true,
          parentMenuId: this.$route.query.tabId,
          menuId: res.rows[0].primaryKey,
          spaceKey: data.spaceKey,
          projectKey: data.primaryKey,
          noTab: true,
        };

        let paramData = [];
        for (let key in queryData) {
          paramData.push(key + '=' + queryData[key]);
        }

        let href = menuUrl + separator + paramData.join('&');
        // console.log(href, 'href');
        window.open(href);
      },
    },
  };
</script>
<style scoped>
  /* @import url(); 引入css类 */
</style>
